<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
<div id="fieldsDialog" title="Category Error">
	<p>
		<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
		Product not selected!<br />
		<b>Please select product for action!</b>
	</p>
</div>

<script type="text/javascript">
jQuery('#list').jqGrid({
	url:'/catalog/products/list/format/json',
	datatype: 'json',
	mtype: 'GET',
	colNames:['Id', 'Alias', 'Brand', 'Title', 'Category', 'Author', 'Date'],
	colModel :[
	  {name:'PRODUCTS_ID', index:'PRODUCTS_ID', sorttype:'int', width:50, searchoptions:{sopt:['eq','ne','lt','le','gt','ge']} },
	  {name:'PRODUCTS_ALIAS', index:'PRODUCTS_ALIAS', searchoptions:{sopt:['bw','bn','ew','en','cn','nc']}},
	  {name:'PRODUCTS_BRANDID', index:'PRODUCTS_BRANDID', searchoptions:{sopt:['eq','ne']}, stype:'select', editoptions:{value:<?php echo json_encode($this->brands); ?>}},
	  {name:'PRODUCTS_TITLE', index:'PRODUCTS_TITLE', searchoptions:{sopt:['bw','bn','ew','en','cn','nc']}},
	  {name:'PRODUCTCATEGORIES_CATEGORYID', index:'PRODUCTCATEGORIES_CATEGORYID', searchoptions:{sopt:['eq','ne']}, stype:'select', editoptions:{value:<?php echo json_encode($this->cats); ?>}},
	  {name:'PRODUCTS_AUTHORID', index:'PRODUCTS_AUTHORID', searchoptions:{sopt:['eq','ne']}, stype:'select', editoptions:{value:<?php echo json_encode($this->users); ?>}},
	  {name:'PRODUCTS_DATE', index:'PRODUCTS_DATE', searchoptions:{dataInit:function(el){$(el).datepicker({dateFormat:'yyyy-mm-dd'});}, sopt:['eq','ne','lt','le','gt','ge']} }
	],
	pager: jQuery('#pager'),
	rowNum:20,
	rowList:[20, 40, 60, 80, 100, 150, 200],
	sortname: 'PRODUCTS_ID',
	sortorder: 'desc',
	viewrecords: true,
	caption: 'Fields View',
	editurl: '/catalog/products/edit',
	height:'auto',
	width:'800'
}).navGrid('#pager',
			{edit:false, add:false, del:true, search:true},
			{}, // edit options
			{}, // add options
			{}, //del options
			{multipleSearch:true} // search options
).navButtonAdd('#pager',{
	caption:"",
	title:"Copy Product",
	buttonicon:"ui-icon-copy",
	onClickButton: function(id) {
		var gr = jQuery("#list").getGridParam("selrow");
		if( gr != null ) {
			document.location.href = '/catalog/products/copy/id/' + gr;
		} else {
			$("#fieldsDialog").dialog('open');
		}
	},
	position:"first"
}).navButtonAdd('#pager',{
	caption:"",
	title:"Edit Product",
	buttonicon:"ui-icon-pencil",
	onClickButton: function(id) {
		var gr = jQuery("#list").getGridParam("selrow");
		if( gr != null ) {
			document.location.href = '/catalog/products/edit/id/' + gr;
		} else {
			$("#fieldsDialog").dialog('open');
		}
	},
	position:"first"
}).navButtonAdd('#pager',{
	caption:"",
	title:"New Product",
	buttonicon:"ui-icon-plus",
	onClickButton: function(id) {
		document.location.href = '/catalog/products/add';
	},
	position:"first"
}).navButtonAdd('#pager',{
	caption:"",
	title:"Product Photos",
	buttonicon:"ui-icon-image",
	onClickButton: function(id) {
		var gr = jQuery("#list").getGridParam("selrow");
		if( gr != null ) {
			document.location.href = '/catalog/photos/list/pid/' + gr;
		} else {
			$("#fieldsDialog").dialog('open');
		}
	},
	position:"last"
});

$("#fieldsDialog").dialog({
	bgiframe: true,
	modal: true,
	autoOpen: false,
	buttons: {
		Ok: function() {
			$(this).dialog('close');
		}
	}
});

</script>
